<!--loading，默认是有阴影的，isShowBg为true的是为透明背景-->
<template>
  <div
    class="page_loading_data"
    :class="{pageLoadingBg: isShowBg}"
  >
    <van-loading type="spinner" color="#333333" />
    <div
      class="page_loading_text"
      :class="{pageLoadingText: isShowBg}"
    >{{ loadingText }}</div>
  </div>
</template>

<script>
export default {
  name: 'LoadingCom',
  components: {},
  props: {
    loadingText: {
      type: String,
      default: '数据拼命加载中,请稍等...',
    },
    isShowBg: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {}
  },
  computed: {},
  create() {
  },
  mounted() {
  },
  methods: {},
}
</script>

<style scoped lang="scss">
  @import "../assets/style/base";
  .page_loading_data {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(0,0,0,0.1);
    .page_loading_text {
      color: #333333;
      margin-top: pxTorem(14px);
      font-size: pxTorem(28px);
      position: relative;
      animation:jump 1s linear 0s infinite alternate;
    }
  }
  .pageLoadingBg{
    background-color: transparent;
  }
  .pageLoadingText{
  }
  @keyframes jump {
    0% {
      left: -10px;
    }
    50% {
      left: 0px;
    }
    100% {
      left: 10px;
    }
  }
</style>
